vue的provide / inject

vue的provide/inject

provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

说明

1. 无论多少层都会被子组建拿到
2. 主要用在高阶组件
3. provide 选项应该是一个对象或返回一个对象的函数。
4. inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，

特别说明

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

最近就碰到了这个问题

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

按照上边的例子，发现如果修改了Provider的foo值，Child的foo并没有随着更改。官网也说了provide并不是响应的。为了解决这个问题 需要把foo变成vue的监听的对象，换句话说就是需要把foo变成对象

var Provider = {
 provide() {
    return {datas:this.contain
  }},
  data() {
    return {
      contain:{
        foo:'foo'
      }
    };
  },
}
var Child = {
  inject: ['datas'],
  created () {
    console.log(this.datas.foo) // => "foo"
  }
  // ...
}

这样修改之后foo就是响应的了